<template>
  <div class='container'>
    <h2>{{row.title}}</h2>
    <div class="header">
      <span>{{formatDate(row.createTime)}}</span>
      <span>{{row.username}}</span>
      <span><i class="el-icon-view"></i></span>
      <span>{{row.visits}}</span>
    </div>
    <div class="content">
      <p v-html="row.articleBody"></p>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  props: {
    presentArticle: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      row: this.presentArticle
    }
  },
  methods: {
    formatDate (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
* {
  margin: 0;
  padding: 0;
}
.header {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  span {
    margin: 0 5px;
  }
}
.content {
  background: #f5f5f5;
  padding: 20px;
  ::v-deep img {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
